<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>老汉建生计划自动生成-下载</title>
         <!-- Bootstrap -->
        <link type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="./css/preview.css">
    </head>

    <body>
        <div class="container conBox">
            <div class="row">
                <div class="col-md-12 bc">
                        <h3 class="text-center" style="">老汉健身计划自动生成系统</h3>
                        <div class="main">
                            <div class="alert alert-warning"><p><span class="glyphicon glyphicon-bullhorn"></span><b> Tip:</b></p>
                                <p><b>友情提示:</b>宝,这边建议您将计划下载保存到本地,以备不时之需! 若您的浏览器不支持打开压缩文件,请复制本站地址到UC丶QQ等浏览器下载并打开哈!</p>
                            </div>
                            <div class="pictures">
                                <div class="col-sm-6 col-md-3">
                                    <div class="thumbnail">
                                        <img src="./image/readme.jpg"
                                             alt="必读手册缩略图" id="readme-pic">
                                        <div id="readme-pdf"></div>
                                        <div class="caption">
                                            <h3>必读手册</h3>
                                            <p>含全套计划使用说明书</p>
                                            <p>
                                                <a href="#" class="btn btn-info" role="button" id="readme-preview">
                                                    预览
                                                </a>
                                                <a href="#" class="btn btn-success" role="button" id="readme-download">
                                                    下载
                                                </a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="thumbnail">
                                        <img src="./image/training.jpg"
                                             alt="训练计划缩略图" id="training-pic">
                                        <div id="training-pdf"></div>
                                        <div class="caption">
                                            <h3>训练计划</h3>
                                            <p>含训练涉及的所有内容</p>
                                            <p>
                                                <a href="#" class="btn btn-info" role="button" id="training-preview">
                                                    预览
                                                </a>
                                                <a href="#" class="btn btn-success" role="button" id="training-download">
                                                    下载
                                                </a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="thumbnail">
                                        <img src="./image/diet.jpg"
                                             alt="饮食计划缩略图" id="diet-pic">
                                        <div id="diet-pdf"></div>
                                        <div class="caption">
                                            <h3>饮食计划</h3>
                                            <p>含饮食涉及的所有内容</p>
                                            <p>
                                                <a href="#" class="btn btn-info" role="button" id="diet-preview">
                                                    预览
                                                </a>
                                                <a href="#" class="btn btn-success" role="button" id="diet-download">
                                                    下载
                                                </a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="thumbnail">
                                        <img src="./image/work.jpg"
                                             alt="作息计划缩略图" id="work-pic">
                                        <div id="work-pdf"></div>
                                        <div class="caption">
                                            <h3>作息计划</h3>
                                            <p>含作息涉及的所有内容</p>
                                            <p>
                                                <a href="#" class="btn btn-info" role="button" id="work-preview">
                                                   预览
                                                </a>
                                                <a href="#" class="btn btn-success" role="button" id="work-download">
                                                    下载
                                                </a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="btns">
                                <button id="download">下载完整压缩包</button>
                            </div>

                            <div class="copyright">
                            <p>©Copyright 2019 老汉健身 版权所有</p>
                            </div>
                        </div>
                </div>
            </div>
        </div>
        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="./js/pdfobject.min.js"></script>
        <script type="text/javascript" src="./js/preview.js"></script>
    </body>

</html>